<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div class="app-container user-container no-margin small-padding">
      <div v-loading="loading" :class="{'mobile-user-detail': showMobilePage}" class="user-info">
        <Title title="基础信息" style="margin-bottom: 10px;" />
        <el-form
          :class="{'mobile-el-form': showMobilePage}"
          :label-position="showMobilePage?'left':'right'"
          label-width="115px"
          class="lineHeight32 height55">
          <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
            <template v-for="item in baseInfo">
              <el-col :key="item.key" :span="12">
                <el-form-item :label="`${item.label}:`">
                  <ToolTip v-if="item.type === 'time' && detailData[item.key]" :content="detailData[item.key] | format(item.format)"/>
                  <el-switch
                    v-else-if="item.type === 'switch'"
                    v-model="detailData[item.key]"
                    :active-value="1"
                    :inactive-value="0"
                    class="fb-switch"
                    @change="switchStatus(detailData, $event)"
                  />
                  <template v-else-if="item.type === 'dept'">
                    <el-tooltip v-if="detailData.departmentName" :open-delay="800">
                      <div slot="content" style="max-width: 200px;">
                        <div v-for="(i, index) in detailData.departmentDetail" :key="index">{{ i }}</div>
                      </div>
                      <div class="ellipsisOne">{{ detailData.departmentName.join(',') }}</div>
                    </el-tooltip>
                    <span v-else>--</span>
                  </template>
                  <ToolTip v-else :content="detailData[item.key]"/>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-form>
        <Title title="财务信息" class="financial-title" style="margin-bottom: 10px;"/>
        <el-form
          :class="{'mobile-el-form': showMobilePage}"
          :label-position="showMobilePage?'left':'right'"
          label-width="115px"
          class="lineHeight32 height55">
          <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
            <template v-for="item in financeInfo">
              <el-col :key="item.key" :span="12">
                <el-form-item :label="`${item.label}:`">
                  <div class="flex-center">
                    <PriceColumn
                      :real-val="detailData.financialInfo[item.key]"
                      :price="detailData.financialInfo[item.key] / 100"
                    />
                    <tipIcon v-if="item.tip" :content="item.tip" style="margin-left: 6px;"/>
                  </div>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-form>
        <Title title="销售信息" class="financial-title" style="margin-bottom: 10px;"/>
        <el-form class="lineHeight32" label-position="right" label-width="115px">
          <el-row :gutter="20" :class="{'dividing': !showMobilePage}" type="flex" class="content">
            <el-col v-for="salesItem in configData" :key="salesItem.field" :span="12">
              <el-form-item :label="`${salesItem.name}:`" class="client-name">
                <div class="info-item">
                  <el-tooltip :open-delay="500" class="item" placement="top">
                    <div slot="content">{{ getNum(`financialInfo.${salesItem.field}`) | moneyFilter }} / {{ getNum(`financialInfo.${salesItem.totalField}`) | moneyFilter }}</div>
                    <div class="flex-center">
                      <span class="red">{{ getNum(`financialInfo.${salesItem.field}`) | bigDataFilter(true, '', false, 2) }}</span>
                      <span>/</span>
                      <span>{{ getNum(`financialInfo.${salesItem.totalField}`) | bigDataFilter(true, '', false, 2) }}</span>
                    </div>
                  </el-tooltip>
                  <!-- 外采额度 -->
                  <template v-if="salesItem.field === 'remainingExternalHarvestAmount'">
                    <el-tooltip :open-delay="500" class="item" placement="top">
                      <div slot="content" style="max-width: 310px">
                        <div>1、渠道订单所关联的账号运营模式=飞博主体，无需扣除</div>
                        <div>2、渠道订单的客户等级标记无需扣除的客户，且客户无逾期情况，无需扣除</div>
                        <div>3、外采额度：已使用额度/总额度</div>
                      </div>
                      <tipIcon is-diy class="ml10"/>
                    </el-tooltip>
                    <div v-if="hasRouteAuth('crm:externalHarvest:create')" class="button-text ml10" @click="toEexternalHarvest">提高额度</div>
                  </template>
                  <!-- 可授权外采额度 -->
                  <el-tooltip v-else class="item" placement="top">
                    <div slot="content" style="max-width: 310px">
                      <div>1、可授权额度每月重置</div>
                      <div>2、外采额度：可授权外采额度/总额度</div>
                    </div>
                    <tipIcon is-diy class="ml10"/>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <fixed-pagination>
        <div class="center">
          <el-button v-if="hasRouteAuth('crm:userList:edit')" type="primary" class="submit-btn" size="small" @click="toEdit">编辑</el-button>
          <el-button class="back-btn cancel-btn-style" size="small" @click="toBack">返回</el-button>
        </div>
      </fixed-pagination>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { getInfo } from '@/api/login';
import { changeStatus } from '@/api/user';
import { hasRouteAuth } from '@/utils/permission';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
import { bigDataFilter, moneyFilter } from '@/filters/number';

export default {
  name: 'UserDetail',
  filters: { format, bigDataFilter, moneyFilter },
  components: { Title },
  data() {
    return {
      userId: '',
      detailData: {
        department: {},
        financialInfo: {}
      },
      loading: false,
      configData: [
        { name: '外采额度', field: 'remainingExternalHarvestAmount', totalField: 'totalExternalHarvestAmount' },
        { name: '可授权外采额度', field: 'remainingAuthExternalHarvestAmount', totalField: 'totalAuthExternalHarvestAmount' }
      ]
    };
  },
  beforeRouteEnter(to, from, next) {
    if (to.name === 'userUpdate') {
      to.meta.isBrand = true;
    }
    next();
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    baseInfo() {
      return [
        { label: '工号', key: 'jobNumber' },
        { label: '姓名', key: 'userName' },
        { label: '用户名', key: 'jobName' },
        { label: '职位', key: 'post' },
        { label: '邮箱', key: 'email' },
        { label: '部门', key: 'departmentName', type: 'dept' },
        { label: '微信号', key: 'wxCode' },
        { label: '创建时间', key: 'createTime', type: 'time', format: 'YYYY/MM/DD HH:mm' },
        { label: '入职时间', key: 'entryTime', type: 'time', format: 'YYYY/MM/DD' },
        { label: '离职时间', key: 'dimissionTime', type: 'time', format: 'YYYY/MM/DD' },
        { label: '最后登录时间', key: 'lastLoginTime', type: 'time', format: 'YYYY/MM/DD HH:mm' },
        { label: '同步时间', key: 'updateTime', type: 'time', format: 'YYYY/MM/DD HH:mm' },
        { label: '状态', key: 'userStatus', type: 'switch' }
      ];
    },
    financeInfo() {
      return [
        { label: '实付金额', key: 'reimbursementAmount' },
        { label: '冲抵借款欠额', key: 'offsetLoanAmount' },
        { label: '转交欠款', key: 'transferArrearsAmount' },
        { label: '还款金额', key: 'repaymentAmount' },
        { label: '借款金额', key: 'loanAmount' },
        { label: '被转交欠款', key: 'transfereeArrearsAmount' },
        { label: '借款欠额', key: 'owedAmount', tip: '借款欠额=借款金额-还款金额-冲抵借款欠额-转交欠款+被转交欠款' }
      ];
    }
  },
  created() {
    this.userId = this.$route.params.userId;
    this.getUserData();
  },
  methods: {
    hasRouteAuth,
    async getUserData() {
      this.loading = true;
      const res = await getInfo(this.userId);
      this.loading = false;
      if (res.code === 200) {
        this.detailData = res.data;
        this.detailData.jobName = (this.detailData.jobNumber + this.detailData.userName).replace(/\s+/g, '');
        if (!this.detailData.financialInfo) {
          this.detailData.financialInfo = {};
        }
      }
    },
    getNum(path) {
      return _.get(this.detailData, path);
    },
    toEdit() {
      this.$router.push({
        name: 'editUser',
        params: { userId: this.detailData.id }
      });
    },
    toEexternalHarvest() {
      const routeUrl = this.$router.resolve({
        name: 'externalHarvestCreate'
      });
      window.open(routeUrl.href, '_blank');
    },
    toBack() {
      this.$router.push({ name: 'user' });
    },
    async switchStatus(data, userStatus) {
      const params = {
        userStatus: userStatus
      };
      try {
        const res = await changeStatus(data.id, params);
        if (res.code === 200) {
          data.userStatus = params.userStatus;
        }
      } catch (error) {
        console.log(error);
        data.userStatus = params.userStatus === 0 ? 1 : 0;
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.user-container {
  margin: 16px;
  .user-info {
    min-height: calc(100vh - 80px);
    padding: 16px 24px;
    background-color: #fff;
  }
}
.ml10 {
  margin-left: 10px;
}
.el-form .el-form-item {
  margin-bottom: 0 !important;
  .el-form-item__label {
    font-size: 14px !important;
    color: #999;
  }
  .el-form-item__content {
    vertical-align: sub;
  }
}
.info-item {
  @include flexStyle($align:center);
  .red {
    color: #FF4E5F;
  }
}
.financial-title{
  margin-top: 32px;
}
.lineHeight32{
  &::v-deep {
    .el-form-item__label{
      color: #999;
    }
    .el-form-item__content{
      color: #333;
    }
  }
}
.mobile-user-detail {
  .el-row {
    flex-wrap: wrap;
    .el-col {
      width: 100% !important;
    }
    .border-right {
      border: none;
    }
    & ::v-deep {
    .el-form-item {
      width: 100% !important;
      border-right: none !important;
    }
   }
  }
}
.dividing {
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD;
      }
      &:nth-child(2n) {
        .el-form-item__content {
          border-right: none;
        }
      }
      &:last-child {
        .el-form-item__content {
          border-right: none;
        }
      }
    }
  }
}
</style>

